In [1]:
from IPython.core.display import display, HTML
from string import Template
import pandas as pd
import json, random
In [2]:
%%javascript
require.config({paths: {d3: "https://d3js.org/d3.v4.min"}});
require(['d3'], function(d3) {
window.d3 = d3;
})
In [3]:
html_template = Template('''
<svg id="graph-div"></div>
<script> $js_text </script>
''')
In [17]:
js_text_template = Template('''
var data = $data;
var itemWidth = 50;
var itemHeight = 50;
var chart = d3.select('#graph-div')
.attr('width', 800)
.attr('height', itemHeight*4);
function update() {
var row = chart.selectAll('.item')
.data(data);
var row2 = row.enter()
.append('g')
.attr("class", "item");
row2.merge(row)
.attr('transform', function(d, i){
return 'translate(' + i*(itemWidth+5) + ', ' + itemHeight + ')rotate(' + d + ', ' + itemWidth*0.5 + ', ' + itemHeight*0.5 + ')';
});
row2.append('rect')
.attr("width", itemWidth)
.attr("height", itemHeight)
.attr("fill", "#9999FF")
.attr("stroke", "#5555AA");
row2.append("text")
.text("Hello");
}
update();
''')
In [18]:
data = [0,10,20,30];
js_text = js_text_template.substitute({'data': json.dumps(data)})
HTML(html_template.substitute({'js_text': js_text}))
Out[18]:
Only run the following cell after running everything else. It was only places here so the slider could be next to the visualization.
In [36]:
interact(update_from_slider, x=widgets.IntSlider(min=0,max=len(data)-10,step=1,value=0));
In [25]:
js_text_template_2 = Template('''
data = $data;
update();
console.log("updating");
''')
In [26]:
data = [0,0,0,0,0,0]
def update_graph(data):
js_text = js_text_template_2.substitute({'data': json.dumps(data)})
display(HTML('<script>' + js_text + '</script>'))
update_graph(data)
Now for the fun stuff. Using the update_graph(data) function set up above. Each group of data, separated by "start" messages, is saved in the tests array. As new data comes in, the live data graph is updated to show data from the last test. All data is neatly saved inside the tests array for replotting and further analysis later.
Using the CloudMQTT free Cat plan:
In [29]:
import paho.mqtt.client as mqtt
n_to_save = 10
data = [0 for i in range(n_to_save)]
# update_graph(data)
def on_connect(client, userdata, flags, rc):
print("Connected with result code "+str(rc))
client.subscribe("/outTopic")
def on_message(client, userdata, msg):
global data
try:
msg_json = json.loads(msg.payload)
except:
print("Error")
print(msg.topic+" "+str(msg.payload))
return
print(msg_json)
if msg_json['type'] == "BINARY" and msg_json['label'] == "Or":
# data.append((msg_json['X'], msg_json['Y'], msg_json['Z']))
data.append(msg_json['Z'])
update_graph(data[-n_to_save:])
print(data[-6:])
client = mqtt.Client()
client.on_connect = on_connect
client.on_message = on_message
client.username_pw_set("zettlmtm", "VOUbRcmhjffA")
client.connect("m11.cloudmqtt.com", 19280, 60)
client.loop_start()
# Make sure to call client.loop_stop() later
In [31]:
client.loop_stop()
Out[31]:
In [33]:
print(data)
In [19]:
from time import sleep
for i in range(len(data)-10):
update_graph(data[i:i+10])
sleep(0.2)
In [34]:
from __future__ import print_function
from ipywidgets import interact, interactive, fixed
import ipywidgets as widgets
In [35]:
def update_from_slider(x):
update_graph(data[x:x+10])
In [18]:
interact(update_from_slider, x=widgets.IntSlider(min=0,max=len(data)-10,step=1,value=0));
In [ ]: